<!-- <template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    width="100%"
    @ok="handleSubmit"
    @close="iscloseDrawer"
  >
    <slot></slot>
  </BasicDrawer>
  <BasicModal 
    v-bind="$attrs"
    width="50%"
    @register="registerModal"
    :title="title"
    @ok="okFunc">
    <slot></slot>
  </BasicModal>
  <div>
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { BasicDrawer, useDrawer, useDrawerInner } from '@/components/Drawer';
import { BasicModal, useModal } from '../../Modal';

const props = defineProps({
  type: {
    type: String as PropType<'drawer' | 'modal' | 'page'>,
  },
  width: {
    type: String as PropType<string>,
  },
  title: {
    type: String as PropType<string>,
  },
  okFunc: {
    type: Function as PropType<() => void>,
  },
});

const [registerModal, { openModal }] = useModal();
const [registerDrawer, { openDrawer }] = useDrawer();
const { closeDrawer } = useDrawerInner();
const { closeModal } = closeModal();

const open = (data) => {
  if (props.type === 'drawer') {
    openDrawer(data);
  } else if (props.type === 'modal') {
    openModal(data);
  }
};
defineExpose({
  open,
});
</script> -->
